import { Layout, Breadcrumb } from 'antd';
import React, { useState } from 'react';
import {Outlet} from 'react-router-dom';
import MainMenu from '@/components/MainMenu'
const { Header, Content, Footer, Sider } = Layout;

const Home: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  // const navigate = useNavigate();

  return (
  <Layout>
    {/* 左边侧边栏 */}
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={value => setCollapsed(value)}
      style={{height: '100vh'}}
    >
      <div className="logo" />
        <MainMenu />
    </Sider>
    {/* 右边内容 */}
    <Layout>
      {/* 右边头部 */}
      <Header className="site-layout-sub-header-background" style={{ lineHeight: '64px', paddingLeft: '16px' }} >
          {/* 面包屑 */}
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
      </Header>
      {/* 右边内容 */}
      <Content style={{ margin: '16px 16px 0' }} className="site-layout-background">
      {/* 窗口部分  - 二级路由挂载点 */}
      <Outlet />
      </Content>
      {/* 右边底部 */}
      <Footer style={{ textAlign: 'center', padding: 0, lineHeight: '48px' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  </Layout>
  )
};

export default Home;